<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}

			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}

			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}

			.oa-contact-avatar {
				width: 75px;
			}

			.oa-contact-avatar img {
				border-radius: 50%;
			}

			.oa-contact-content {
				width: 100%;
			}

			.oa-contact-name {
				margin-right: 20px;
			}

			.oa-contact-name,
			oa-contact-position {
				float: left;
			}

			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}

			.mui-off-canvas-left {
				color: #fff;
			}

			.mui-plus .plus {
				display: inline;
			}

			.plus {
				display: none;
			}

			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}

			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}

			p {
				text-indent: 22px;
			}

			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}

			.mui-popover {
				height: 300px;
			}

			.mui-content {
				padding: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="height: 30px;">
			<!--<a id="offCanvasShow" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>-->
			<!--<h1 class="mui-title">首页</h1>-->

			<a id="menu" class="mui-action-menu mui-icon mui-icon-paperplane mui-pull-right" style="padding-bottom: 0px; padding-top: 3px;" href="#topPopover">澳门</a>
		</header>

		<!--右上角弹出菜单-->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#"
								onclick="ChangeService('SiteServiceType_Macao')">澳门</a></li>
						<li class="mui-table-view-cell"><a href="#"
								onclick="ChangeService('SiteServiceType_HongKong')">香港</a></li>
					</ul>
				</div>
			</div>
		</div>

		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--侧滑菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="title"></div>
						<div class="content" style="padding: 40px 0 0 20px;">
							<img id="profile" src="images/profile.jpg" style="border-radius: 50%; width: 40%;" />
							<p id="txtName">用户</p>
						</div>
						<div class="title" style="margin-bottom: 25px;">功能列表</div>
						<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell" id="li01">
								<a class="mui-navigate-right mui-tab-item" href="#tabbar1">
									操作台
								</a>
							</li>

							<li class="mui-table-view-cell" id="li02">
								<a class="mui-navigate-right mui-tab-item" href="#tabbar2">
									统计
								</a>
							</li>

							<li class="mui-table-view-cell" id="li03">
								<a class="mui-navigate-right mui-tab-item" href="#tabbar3">
									设置
								</a>
							</li>
						</ul>
					</div>
				</div>
			</aside>

			<!--主界面部分-->
			<div class="mui-inner-wrap">
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">

						<div class="mui-content">
							<iframe id="tabbar1" src="record.html" class="mui-control-content mui-active"
								style="width: 100%; height: 95vh;border: none; padding-top: 25px;">

							</iframe>

							<iframe id="tabbar2" src="recordSum.html" class="mui-control-content"
								style="width: 100%; height: 95vh;border: none;padding-top: 25px">

							</iframe>

							<iframe id="tabbar3" src="setting.html" class="mui-control-content"
								style="width: 100%; height: 95vh;border: none;padding-top: 25px">

							</iframe>
						</div>

					</div>
				</div>
			</div>
		</div>

		<nav class="mui-bar mui-bar-tab" style="position: absolute; bottom:0px;">
			<a class="mui-tab-item  mui-active" href="#tabbar1" onclick="Page_To_Record()">
				<span class="mui-icon mui-icon-email"><!--<span class="mui-badge">9</span>--></span>
				<span class="mui-tab-label">操作台</span>
			</a>
			<a class="mui-tab-item" href="#tabbar2" onclick="Page_To_RecordSum()">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">统计</span>
			</a>
			<a class="mui-tab-item" href="#tabbar3" onclick="Page_To_Setting()">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="libs/lib.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		(function($, doc) {
			InitServiceMenu();
			InitLeftBar();
		}(mui, document));

		function InitServiceMenu() {
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
		}

		function InitLeftBar() {
			//侧滑容器父节点
			var offCanvasWrapper = mui('#offCanvasWrapper');
			//主界面容器
			var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
			//菜单容器
			var offCanvasSide = document.getElementById("offCanvasSide");

			//移动效果是否为整体移动
			var moveTogether = false;
			//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
			var classList = offCanvasWrapper[0].classList;
			//变换侧滑动画移动效果；


			offCanvasSide.classList.remove('mui-transitioning');
			offCanvasSide.setAttribute('style', '');
			classList.remove('mui-slide-in');
			classList.remove('mui-scalable');


			// 				if (moveTogether) {
			// 					//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
			// 					offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
			// 				}


			// 				if (moveTogether) {
			// 					//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
			// 					offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
			// 				}
			// 				classList.add('mui-scalable');



			// 				classList.add('mui-slide-in');



			moveTogether = true;
			//整体滑动时，侧滑菜单在inner-wrap内
			offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);


			offCanvasWrapper.offCanvas().refresh();


			/**/
			//主界面‘显示侧滑菜单’按钮的点击事件
			//document.getElementById('offCanvasShow').addEventListener('tap', function() {
			//	offCanvasWrapper.offCanvas('show');
			//});

			//菜单界面，‘关闭侧滑菜单’按钮的点击事件
			// document.getElementById('offCanvasHide').addEventListener('tap', function() {
			// 	offCanvasWrapper.offCanvas('close');
			// });
			document.getElementById('li01').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			document.getElementById('li02').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});
			document.getElementById('li03').addEventListener('tap', function() {
				offCanvasWrapper.offCanvas('close');
			});

			//主界面和侧滑菜单界面均支持区域滚动；
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//实现ios平台原生侧滑关闭页面；
			if (mui.os.plus && mui.os.ios) {
				mui.plusReady(function() { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
					plus.webview.currentWebview().setStyle({
						'popGesture': 'none'
					});
				});
			}
		}

		function ChangeService(type) {
			var typeName = "澳门";
			if (type == "SiteServiceType_HongKong")
				typeName = "香港";
			else if (type == "SiteServiceType_Macao")
				typeName = "澳门";
			document.getElementById("menu").innerHTML = typeName;
			mui("#topPopover").popover('hide');
			
			localStorage.setItem('SERVICE_TYPE', type);
			
			Page_RefreshAll();
		}
		function Page_RefreshAll(){
			document.getElementById("tabbar1").src = "record.html";
			document.getElementById("tabbar2").src = "recordSum.html";			
			var iframe = document.getElementById("tabbar3");
			var iframeUrl = iframe.contentWindow.location.href;
			if(iframeUrl.indexOf("site_list.html") > -1){
				iframe.contentWindow.location.href = "site_list.html";
			}
		}

		initUser();

		function initUser() {
			var user = Core.User.GetUser();
			if (!user)
				return;
			document.getElementById("txtName").innerHTML = user.userName;
			document.getElementById("profile").innerHTML = user.account;
			
			//默认澳门服务器
			var type = localStorage.getItem('SERVICE_TYPE');			
			if(type){
				ChangeService(type);
			}
		}

		function Page_To_Setting() {
			document.getElementById("tabbar3").src = "setting.html";
		}

		function Page_To_Record() {
			document.getElementById("tabbar1").src = "record.html";
		}

		function Page_To_RecordSum() {
			document.getElementById("tabbar2").src = "recordSum.html";
		}
	</script>
</html>